<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="./template.xhtml">

    <ui:define name="title">
        ContextMenu - <span class="subitem">Target</span>
    </ui:define>

    <ui:define name="description">
        ContextMenu can be attached to any component, right-click on ImageSwitch component for options.
    </ui:define>

    <ui:param name="documentationLink" value="/components/contextmenu" />

    <ui:define name="implementation">
        <p:imageSwitch id="images" effect="fade" widgetVar="gallery" slideshowAuto="false">
            <p:graphicImage name="/demo/images/nature/nature1.jpg" />
            <p:graphicImage name="/demo/images/nature/nature2.jpg" />
            <p:graphicImage name="/demo/images/nature/nature3.jpg" />
            <p:graphicImage name="/demo/images/nature/nature4.jpg" />
        </p:imageSwitch>
		
        <p:contextMenu for="images">
            <p:menuitem value="Prev" url="javascript:void(0)" onclick="PF('gallery').previous()" icon="pi pi-caret-left" />
            <p:menuitem value="Next" url="javascript:void(0)" onclick="PF('gallery').next()" icon="pi pi-caret-right" />
            <p:menuitem value="Remove" url="javascript:void(0)" onclick="PF('gallery').getJQ().fadeOut()" icon="pi pi-times"/>
        </p:contextMenu>
    </ui:define>

</ui:composition>